<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- 引入Title图标 -->
<link href="${pageContext.request.contextPath }/favicon.ico" type="image/x-icon" rel="shortcut icon" />
<!-- 声明页面信息与字符编码集 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 声明移动端响应式布局-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 引入Bootstrap框架样式部分-->
<link rel="stylesheet" href="${pageContext.request.contextPath }/framework/bootstrap.min.css" />
<!-- 引入该页面对应样式表 -->
<link rel="stylesheet" href="${pageContext.request.contextPath }/css/index.css" />
<!-- 引入logo使用的网络字库 -->
<link href='//cdn.webfont.youziku.com/webfonts/nomal/21641/46833/582d7e08f629d8136ca2db97.css' rel='stylesheet' type='text/css' />
<!-- 引入类型标题使用的网络字库 -->
<link href='//cdn.webfont.youziku.com/webfonts/nomal/21641/19673/583304a6f629d816742d34f6.css' rel='stylesheet' type='text/css' />
<!-- 引入jQuery库 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/framework/jquery-2.0.2.js"></script>
<!-- 引入Bootstrap框架js部分 -->
<script type="text/javascript" src="${pageContext.request.contextPath }/framework/bootstrap.min.js"></script>
<title>商品详情</title>
<style type="text/css">
	.question_bar {
				width: 100%;
				height: 300px;
				background-color: orange;
				margin-top: -21px;
				background: url(photo/account/question_bar.png) no-repeat center center;
				background-size: cover;
			}
			td p {
				margin-left: 40px;
			}
			td h4 {
				margin-left: 30px;
			}
			/*
			 * Description : 周边页面
			 * Time : 2016 / 11 / 21
			 * Author : li
			 * */

			/*通用样式, 消除默认外边距, 以body元素为基准*/
			* {
				margin: 0;
				padding: 0;
			}
			body {
				width: 100%;
				height: 100%;
				background-color: #EEEEEB;
			}
			/*  ----------------------------------------------------------------*/

			/*商品详情部分*/
			#de_bg{
				background-color: white;
			}
			.detail_layout{
				display: table;
				width: auto;
				margin-left: auto;
				margin-right: auto;
			}
			.detail_p1{
				font-size: 25px;
				font-weight: 100;
				padding-bottom: 40px;
				padding-top: 40px;
			}
			.detail_p2{
				font-size: 30px;
				font-weight: 100;
				color: red;
				vertical-align: bottom;
			}
			.detail_p3{
				font-weight: 100;
				color:gray;
				padding-left: 10px;
				padding-top: 15px;
				vertical-align: bottom;
			}
			.buy{
				padding-top: 160px;
			}
			.detail_p4{
				font-weight: 100;
				color:black;
				font-size: 20px;
				padding-left: 60px;
				padding-top: 30px;
				padding-bottom: 1px;
			/*	vertical-align: bottom;*/
			}
			/*  ----------------------------------------------------------------*/

</style>
</head>
<body>
<!-- 网站主体导航栏 [[ -->
<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand css716dd981b5489" href="index-index-show" style="color:#f36c60; font-size:28px;">国产动漫平台</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class=""><a href="index-index-show"><i class="glyphicon glyphicon-film" style="font-size:10px;"></i> 主站</a></li>
        <li><a href="palette-palette-show"><i class="glyphicon glyphicon-picture" style="font-size:10px;"></i> 画友</a></li>
        <li><a href="shop-shop-show"><i class="glyphicon glyphicon-shopping-cart" style="color:#f36c60; font-size:10px;"></i> 周边商城</a></li>
      	<li><a href="game-game-show"><i class="glyphicon glyphicon glyphicon-fire" style="font-size:10px;"></i> 情报资料</a></li>
      </ul>
            <form class="navbar-form navbar-right" role="search" action="index-search-execute" method="post">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="来啊, 搜我呀~" name="search">
        </div>
        <button type="submit" class="btn btn-default" style="background-color:#f36c60;">
        	<i class="glyphicon glyphicon-search" style="color:white;"></i>
        </button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <c:if test="${sessionScope.user != null}">
        	<li><a href="account-collect-show">收藏夹</a></li>
        </c:if>
        <li class="dropdown">
          <!-- 用户未登录显示部分 -->
          <c:if test="${sessionScope.user == null}">
	          <a href="#" class="dropdown-toggle" data-toggle="dropdown" >登录/注册 <span class="caret"></span></a>
	          <ul class="dropdown-menu" role="menu">
	            <li><a href="account-login-show"><i class="glyphicon glyphicon-user" style="color:#f36c60;"></i> 用户登录</a></li>
	            <li class="divider"></li>
	            <li><a href="account-question-show"><i class="glyphicon glyphicon-plus-sign" style="color:#f36c60;"></i> 注册账号</a></li>
	          </ul>
          </c:if>
          <!-- 用户已登录显示部分 -->
          <c:if test="${sessionScope.user != null}">
	          <a href="#" class="dropdown-toggle" data-toggle="dropdown" >${sessionScope.user.username } <span class="caret"></span></a>
	          <ul class="dropdown-menu" role="menu">
	            <li><a href="account-myself-show"><i class="glyphicon glyphicon-home" style="color:#f36c60;"></i> 个人中心</a></li>
	            <li><a href="account-edit-show"><i class="glyphicon glyphicon-pencil" style="color:#f36c60;"></i> 修改资料</a></li>
	            <li class="divider"></li>
	            <li><a href="account-exit-execute"><i class="glyphicon glyphicon-circle-arrow-left" style="color:#f36c60;"></i> 退出登录</a></li>
	          </ul>
          </c:if>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<!-- 网站主体导航栏 ]] -->






<!--goods detail界面-->
		<div id="de_bg">
			<div class="row ">
			<div class="col-md-6 detail_layout">
				<img src="${pageContext.request.contextPath }/photo/shop/img_detail/goods.png">
			</div>

			<div class="col-md-6 detail_layout">
				<div class="row detail_p1">
					<p>bilibili周边 小电视天线卫衣 连帽休闲拼接卫衣</p>
				</div>
				<div class="row">
					<div class="col-md-2"><p class="detail_p3">价格：</p></div>
					<div class="col-md-3"><p class="detail_p2">$199.00</p></div>
					<div class="col-md-6 detail_p3"><strike>市场价 279.00</strike></div>
				</div>
				<hr />
				<div class="row" style="margin-top: 50px;">
					<div class="col-md-2"><p class="detail_p3">数量</p></div>

					<div class="col-md-6" style="margin-top: 8px;">
					    <div class="input-group">
					      <span class="input-group-btn">
					        <button class="btn btn-default" type="button">
					        	<i class="glyphicon glyphicon-minus""></i>
					        </button>
					      </span>
					      <input type="text" class="form-control">
					      <span class="input-group-btn">
					        <button class="btn btn-default" type="button">
					        	<i class="glyphicon glyphicon-plus""></i>
					        </button>
					      </span>
					    </div><!-- /input-group -->
				  	</div><!-- /.col-lg-6 -->
				</div>
				<div class="row buy">
					<div class="col-md-4"><button type="button" class="btn btn-danger">立即购买</button></div>
					<div class="col-md-4"><button type="button" class="btn btn-default">放入购物车</button></div>
				</div>
			</div>
		</div>

		<!--商品详情-->
		<div class="row detail_p4">
			<p>商品详情</p>
		</div>
		<hr />
		<div class="row detail_layout">
			<img src="${pageContext.request.contextPath }/photo/shop/img_detail/goods_detail.jpg"/>
		</div>






<br><br><br>
<!-- 友情链接部分 [[ -->
<div class="container-fluid" style="background-color:rgb(236,236,236)" id="footer">
<br>
	<div class="container">
		<h4 style="color:#bbb">友情链接</h4>
		<div class="row">
			<div class="col-lg-4 col-md-4">
				<ul style="list-style: none;">
					<li><a href="${sessionScope.friendLinks[0].src }">${sessionScope.friendLinks[0].name }</a></li>
					<li><a href="${sessionScope.friendLinks[1].src }">${sessionScope.friendLinks[1].name }</a></li>
					<li><a href="${sessionScope.friendLinks[2].src }">${sessionScope.friendLinks[2].name }</a></li>
				</ul>
			</div>
			<div class="col-lg-4 col-md-4">
				<ul style="list-style: none;">
					<li><a href="${sessionScope.friendLinks[3].src }">${sessionScope.friendLinks[3].name }</a></li>
					<li><a href="${sessionScope.friendLinks[4].src }">${sessionScope.friendLinks[4].name }</a></li>
					<li><a href="${sessionScope.friendLinks[5].src }">${sessionScope.friendLinks[5].name }</a></li>
				</ul>
			</div>
			<div class="col-lg-4 col-md-4" style="font-size:16px;">
				<ul>
					<li>您可以下载我们的移动客户端</li>
					<li>也欢迎您关注我们的微博和微信<img src="${pageContext.request.contextPath }/photo/index/title_logo.png" width="50" height="35""></img></li>
				</ul>
			</div>
		</div>
	</div>
	<br>
</div>
<!-- 友情链接部分 ]] -->
</body>
</html>
